<div #fullScreen id="hostDiagram">
	<mat-toolbar class="spaceBetweenCenter">
		<div>
			<button (click)="diagramController!.autoPlace()" mat-button>
				<span class="material-symbols-outlined notranslate">
					view_cozy
				</span>
				Place tables
			</button>

			<button [matMenuTriggerFor]="legend" mat-button>
				<span class="material-symbols-outlined notranslate">
					legend_toggle
				</span>
				Legend
			</button>
			<mat-menu #legend="matMenu" class="legend">
				<span mat-menu-item>
					<span>-</span>one TO one
				</span>
				<span mat-menu-item>
					<span>-<</span>one TO many
				</span>
				<span mat-menu-item>
					<span>>-</span>many TO one
				</span>
				<span mat-menu-item>
					<span>>-<</span>many TO many
				</span>
				<span mat-menu-item>
					<span>-0</span>one TO zero or one
				</span>
				<span mat-menu-item>
					<span>0-</span>zero or one TO one
				</span>
				<span mat-menu-item>
					<span>0-0</span>zero or one TO zero or one
				</span>
				<span mat-menu-item>
					<span>-0<</span>one TO zero or many
				</span>
				<span mat-menu-item>
					<span>>0-</span> zero or many TO one
				</span>
			</mat-menu>
		</div>

		<div *ngIf="diagramController" style="display: flex; align-items: center; gap: 8px;">
			<button (click)="openFullscreen()" mat-button>
				<span class="material-symbols-outlined notranslate">
					{{ full ? 'fullscreen_exit' : 'fullscreen' }}
				</span>
			</button>

			<div class="slider">
				<div>
					<span>Zoom</span>
					<span>{{ Math.floor(diagramController.fontSize * 100) }}</span>
				</div>
				<mat-slider
					(input)="diagramController.fontSize = $event.value!; diagramController.applyFontSize()"
					[value]="diagramController.fontSize"
					color="accent"
					max="1.5"
					min="0.1"
					step="0.05">
				</mat-slider>
			</div>

			<mat-slide-toggle
				(click)="toggleDetail()"
				checked
				color="accent">
				Details
			</mat-slide-toggle>
		</div>

		<div>
			<button (click)="exportPng()" mat-button>
				<span class="material-symbols-outlined notranslate">
					photo_camera
				</span>
				PNG
			</button>
			<button (click)="exportSvg()" mat-button>
				<span class="material-symbols-outlined notranslate">
					photo_camera
				</span>
				SVG
			</button>
		</div>

	</mat-toolbar>

	<div #container
		 id="containerDiagram">
		<mat-progress-bar *ngIf="diagramController?.isAutoMoving"
						  color="accent"
						  mode="indeterminate"></mat-progress-bar>
		<div #scrollable
			 [ngClass]="{'hideDetails' : !showDetails}"
			 id="scrollableDiagram"
		></div>
	</div>
</div>
